<template>
    <section class="main-white">
        <div class="pageBox">
            <div class="botBox">
                <search :items="searchs" @filter="onSearch" />
                <div class="margin-bottom10">
                    <el-button v-if="premission.add" type="primary" :icon="Plus" @click="editRef.open('新增', {})">添加</el-button>
                </div>
                <page-wrapper @get-data="getData" ref="pageRef">
                    <template v-slot:default="props">
                        <vxe-table ref="tableRef" align="center" class="mytable-scrollbar" :loading="props.loading" :data="props.tableData.records" :max-height="common.tableHeight(true, premission.add ? 2 : 1)" highlight-hover-row round stripe border>
                            <vxe-column field="channelCode" title="渠道唯一识别码" :width="150"></vxe-column>
                            <vxe-column field="channelName" title="渠道名称" :width="150"></vxe-column>
                            <vxe-column field="h5Url" title="H5链接" :width="250"></vxe-column>
                            <vxe-column title="单价类别" :width="150">
                                <template #default="{ row }">
                                    <span v-if="row.priceType == 0">uv单价</span>
                                    <span v-else-if="row.priceType == 1">下单单价</span>
                                    <span v-else>实际租用单价</span>
                                </template>
                            </vxe-column>
                            <vxe-column field="price" title="单价" :width="150"></vxe-column>
                            <vxe-column field="createTime" title="创建日期" :width="150"></vxe-column>
                            <vxe-column title="操作" width="auto" min-width="150" fixed="right">
                                <template #default="{ row }" style="text-align: center">
                                    <span class="cursorBtn" style="color: red" @click="editRef.open('详情', row)">查看</span>
                                    <span class="cursorBtn" style="color: green; margin-left: 20px" @click="editRef.open('编辑', row)" v-if="premission.edit">编辑</span>
                                    <span class="cursorBtn" style="color: green; margin-left: 20px" @click="deleteBtn(row.id)" v-if="premission.delete">删除</span>
                                </template>
                            </vxe-column>
                        </vxe-table>
                    </template>
                </page-wrapper>
            </div>
        </div>
        <edit ref="editRef" @refresh="flag => pageRef.refresh(flag)" />
    </section>
</template>

<script>
export default {
    name: '',
};
</script>
<script setup>
import { reactive, ref } from 'vue';
import Type from '@components/search/type';
import PageWrapper from '@components/PageWrapper.vue';
import Search from '@components/search/index';
import edit from './edit.vue';
import { common, service } from '@utils';
import { usePremission, useRole } from '@hooks';
import { Plus } from '@element-plus/icons-vue';
const premission = usePremission({
    delete: 'active:channelConfig:delete',
    add: 'active:channelConfig:add',
    edit: 'active:channelConfig:edit',
});
const state = reactive({});
let queryForm = reactive({
    time: [],
});
const editRef = ref();
const tableRef = ref();
const pageRef = ref();
const searchs = ref([
    {
        type: Type.INPUT,
        key: 'channelName',
        width: 6,
        placeholder: '请输入渠道名称',
        valueKey: 'val',
    },
    {
        type: Type.DATE_RANGE,
        width: 7,
        key: 'time',
        endPlaceholder: ' 结束日期',
        startPlaceholder: '开始日期',
    },
    {
        width: 6,
        type: Type.SEARCH_BUTTON,
    },
]);
const onSearch = param => {
    queryForm = param;
    pageRef.value.refresh();
};
const deleteBtn = async id => {
    ElMessageBox.confirm('是否删除此渠道', '提示', {
        type: 'warning',
    })
        .then(async () => {
            const res = await service.channelConfigApi.channelConfigDelete({ id });
            if (res) {
                pageRef.value.refresh();
                ElMessage.success('删除成功');
            }
        })
        .catch(() => {});
};
const getData = async ({ pageNum, pageSize }, cb) => {
    const query = { ...queryForm };
    if (query.time && query.time.length > 0) {
        query.startTime = query.time[0];
        query.endTime = query.time[1];
    }
    delete query.time;
    const res = await service.channelConfigApi.channelConfigPageQuery(pageNum, pageSize, query);
    cb(res);
    setTimeout(() => {
        tableRef.value.scrollTo(0, 0);
    }, 0);
};
</script>
<style scoped lang="scss">
.cursorBtn {
    cursor: pointer;
}
</style>
